<template>
  <view class="login-wrap" :data-theme="globPrimary">
    <u-navbar title="注册"></u-navbar>
    <!-- 验证码 -->
    <u-form :model="verify" ref="verifyForm" :error-type="errorType" label-width="120rpx">
      <u-form-item label="+86" left-icon="arrow-down" prop="phone"
        ><u-input v-model="verify.phone" placeholder="请输入手机号" type="number"
      /></u-form-item>
      <u-form-item label="验证码" prop="verify">
        <u-input placeholder="请输入验证码" v-model="verify.verify" type="text"></u-input>
        <edu-button
          slot="right"
          type="text"
          :disabled="verifyDisabled || codeType"
          @click="handleGetCode"
          class="code-btn"
          >{{ codeTips }}</edu-button
        >
      </u-form-item>
    </u-form>
    <view class="verify-btn">
      <edu-button type="primary" @click="$u.debounce(handleVerifySubmit, 1000)">下一步</edu-button>
    </view>
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
      @end="codeEnd"
      @start="codeStart"
    ></u-verification-code>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      verify: {
        phone: '',
        verify: '',
      },
      rulesVerify: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          },
        ],
        verify: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
        ],
      },
      codeTips: '',
      codeType: true,
      errorType: ['message'],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
    verifyDisabled() {
      let disabled = true
      if (this.$u.test.mobile(this.verify.phone)) {
        this.codeType = false
        disabled = false
      } else {
        this.codeType = true
      }
      return disabled
    },
  },

  options: { styleIsolation: 'shared' },
  methods: {
    // 注册
    handleVerifySubmit() {
      this.$refs.verifyForm.validate((valid) => {
        if (valid) {
          this.$edu.api
            .createUserLogin({
              ...this.verify,
              logintype: 'verify',
            })
            .then((res) => {
              const { data } = res
              if (data.need_set_password == 1) {
                this.$u.route({
                  url: '/pageUser/login/registerPwd',
                })
              } else {
                this.$u.route({
                  type: 'back',
                  delta: 2,
                })
              }
              this.$store.commit('user/setToken', data)
              // 获取个人信息
              this.$store.dispatch('user/setUserInfo', data)
              // 设置用户头像
              this.$store.commit('user/setAvatar', data.avatar_url)
            })
            .catch((err) => {
              this.$u.toast(err.msg)
            })
        }
      })
    },
    // 获取验证码
    handleGetCode() {
      if (this.$refs.uCode.canGetCode) {
        this.$edu.api.createVerify({ phone: this.verify.phone, type: 'login' }).then((res) => {
          this.$refs.uCode.start()
        })
      }
    },
    // 倒计时
    codeChange(text) {
      this.codeTips = text
    },
    // 倒计时开始
    codeStart() {
      this.codeType = true
    },
    // 倒计时结束
    codeEnd() {
      this.codeType = false
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.verifyForm.setRules(this.rulesVerify)
  },
}
</script>

<style lang="scss" scoped>
.login-wrap {
  padding: 0 30rpx;
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  background-color: #fff;
  /deep/.u-form-item {
    color: #606266;
    .u-form-item--left__content {
      flex-direction: row-reverse;
    }
  }
  .verify-btn {
    margin-top: 170rpx;
  }
  .code-btn {
    margin-left: auto;
  }
  .code-disabled {
    color: #b7bac1;
  }
}
</style>
